<template>
  <demo-content :title="title">
    <p>
      <code>toDataURL(type, quality)</code>
      返回一个数据地址(dataURL)，你可以将它设定为img 元素的src
      属性值，是一个经过 Base64 编码的图片。
      第一个参数指定了图像的类型，例如image/jpeg 或image/png，如果不指定第一个
      参数 ， 则默认使用image/png。 第二个参数必须是 0 ~ 1.0
      之间的double值，它表示JPEG图像的显示质量。
    </p>
    <canvas ref="canvasRef"></canvas>
    <img :src="imageUrl" alt="canvas-image" style="border: 3px solid orange" />
    <img :src="imageUrl2" alt="canvas-image2" style="border: 3px solid green" />
  </demo-content>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";

const title = "toDataUrl";
// 指定组件上的属性
defineOptions({ title });
const imageUrl = ref("");
const imageUrl2 = ref("");

const canvasRef = ref<HTMLCanvasElement>();
onMounted(() => {
  const canvas = canvasRef.value!;
  // 获取绘图环境变量
  const context = canvas.getContext("2d")!;

  context.font = "38pt Arial";
  // fillStyle / strokeStyle 可以是 CSS 格式的颜色、渐变色或是图案
  context.fillStyle = "cornflowerblue";
  context.strokeStyle = "blue";
  // 使用 context 的 fillStyle 属性绘制文本
  context.fillText(
    "Hello Canvas", // 要绘制的文本内容
    canvas.width / 2 - 150,
    canvas.height / 2 + 15
  );
  // 使用 context 的 strokeStyle 属性绘制文本轮廓
  context.strokeText(
    "Hello Canvas",
    canvas.width / 2 - 150,
    canvas.height / 2 + 15
  );
  imageUrl.value = canvas.toDataURL();
  canvas.toBlob((blob) => {
    // blob 是一个 Blob 类型的对象
    if (blob) {
      // URL.createObjectURL 将一个 Blob 变为一个 Blob 的 URL
      imageUrl2.value = URL.createObjectURL(blob);
      console.log(imageUrl2.value);
    }
  });
});
</script>

<style src="./default.css" scoped></style>
